import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtCharts 2.14
import "components"
import "styles"

Rectangle {
    id: dataVisualizationPage
    width: 1024
    height: 600
    color: AppStyle.colors.background
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtCharts 2.14
import "components"
import "styles"

Rectangle {
    id: dataVisualizationPage
    width: 1024
    height: 600
    color: AppStyle.backgroundColor

    property string selectedTimeRange: "24h"
    property string selectedDataType: "all"

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        // 标题和控制区域
        RowLayout {
            Layout.fillWidth: true

            Text {
                text: "数据可视化"
                font.pixelSize: 24
                font.bold: true
                color: AppStyle.colors.textPrimary
                Layout.fillWidth: true
            }

            ComboBox {
                id: timeRangeComboBox
                model: ["1小时", "24小时", "7天", "30天"]
                currentIndex: 1
                onCurrentTextChanged: {
                    dataVisualizationPage.selectedTimeRange = currentText
                    refreshCharts()
                }
            }

            ComboBox {
                id: dataTypeComboBox
                model: ["全部数据", "流量数据", "温度数据", "压力数据"]
                currentIndex: 0
                onCurrentTextChanged: {
                    dataVisualizationPage.selectedDataType = currentText
                    refreshCharts()
                }
            }

            CustomButton {
                text: "刷新"
                onClicked: refreshCharts()
            }

            CustomButton {
                text: "返回"
                backgroundColor: AppStyle.colors.textSecondary
                onClicked: {
                    if (qmlBridge) {
                        qmlBridge.navigateToPage("Dashboard")
                    }
                }
            }
        }

        // 图表区域
        GridLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            columns: 2
            columnSpacing: 20
            rowSpacing: 20

            // 流量趋势图
            ChartContainer {
                Layout.fillWidth: true
                Layout.fillHeight: true
                title: "流量趋势"
                
                ChartView {
                    id: flowRateChart
                    anchors.fill: parent
                    anchors.margins: 10
                    antialiasing: true
                    backgroundColor: "transparent"
                    plotAreaColor: AppStyle.cardBackgroundColor
                    
                    LineSeries {
                        id: flowRateSeries
                        name: "流量 (L/min)"
                        color: AppStyle.primaryColor
                        width: 2
                    }
                    
                    ValueAxis {
                        id: flowRateAxisX
                        min: 0
                        max: 24
                        tickCount: 7
                        labelFormat: "%d"
                        titleText: "时间 (小时)"
                    }
                    
                    ValueAxis {
                        id: flowRateAxisY
                        min: 0
                        max: 50
                        tickCount: 6
                        labelFormat: "%.1f"
                        titleText: "流量 (L/min)"
                    }
                    
                    Component.onCompleted: {
                        flowRateChart.setAxisX(flowRateAxisX, flowRateSeries)
                        flowRateChart.setAxisY(flowRateAxisY, flowRateSeries)
                    }
                }
            }

            // 温度趋势图
            ChartContainer {
                Layout.fillWidth: true
                Layout.fillHeight: true
                title: "温度趋势"
                
                ChartView {
                    id: temperatureChart
                    anchors.fill: parent
                    anchors.margins: 10
                    antialiasing: true
                    backgroundColor: "transparent"
                    plotAreaColor: AppStyle.cardBackgroundColor
                    
                    LineSeries {
                        id: temperatureSeries
                        name: "温度 (°C)"
                        color: AppStyle.warningColor
                        width: 2
                    }
                    
                    ValueAxis {
                        id: tempAxisX
                        min: 0
                        max: 24
                        tickCount: 7
                        labelFormat: "%d"
                        titleText: "时间 (小时)"
                    }
                    
                    ValueAxis {
                        id: tempAxisY
                        min: 15
                        max: 35
                        tickCount: 5
                        labelFormat: "%.1f"
                        titleText: "温度 (°C)"
                    }
                    
                    Component.onCompleted: {
                        temperatureChart.setAxisX(tempAxisX, temperatureSeries)
                        temperatureChart.setAxisY(tempAxisY, temperatureSeries)
                    }
                }
            }

            // 压力趋势图
            ChartContainer {
                Layout.fillWidth: true
                Layout.fillHeight: true
                title: "压力趋势"
                
                ChartView {
                    id: pressureChart
                    anchors.fill: parent
                    anchors.margins: 10
                    antialiasing: true
                    backgroundColor: "transparent"
                    plotAreaColor: AppStyle.cardBackgroundColor
                    
                    LineSeries {
                        id: pressureSeries
                        name: "压力 (kPa)"
                        color: AppStyle.successColor
                        width: 2
                    }
                    
                    ValueAxis {
                        id: pressureAxisX
                        min: 0
                        max: 24
                        tickCount: 7
                        labelFormat: "%d"
                        titleText: "时间 (小时)"
                    }
                    
                    ValueAxis {
                        id: pressureAxisY
                        min: 95
                        max: 105
                        tickCount: 6
                        labelFormat: "%.1f"
                        titleText: "压力 (kPa)"
                    }
                    
                    Component.onCompleted: {
                        pressureChart.setAxisX(pressureAxisX, pressureSeries)
                        pressureChart.setAxisY(pressureAxisY, pressureSeries)
                    }
                }
            }

            // 采样统计图
            ChartContainer {
                Layout.fillWidth: true
                Layout.fillHeight: true
                title: "采样统计"
                
                ChartView {
                    id: samplingChart
                    anchors.fill: parent
                    anchors.margins: 10
                    antialiasing: true
                    backgroundColor: "transparent"
                    plotAreaColor: AppStyle.cardBackgroundColor
                    
                    PieSeries {
                        id: samplingSeries
                        
                        PieSlice {
                            label: "定时采样"
                            value: 60
                            color: AppStyle.primaryColor
                        }
                        
                        PieSlice {
                            label: "定量采样"
                            value: 30
                            color: AppStyle.successColor
                        }
                        
                        PieSlice {
                            label: "手动采样"
                            value: 10
                            color: AppStyle.warningColor
                        }
                    }
                }
            }
        }

        // 数据统计信息
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 80
            color: AppStyle.cardBackgroundColor
            radius: 8
            border.color: AppStyle.borderColor
            border.width: 1

            RowLayout {
                anchors.fill: parent
                anchors.margins: 20
                spacing: 40

                ColumnLayout {
                    spacing: 5
                    Text {
                        text: "总采样次数"
                        font.pixelSize: 12
                        color: AppStyle.secondaryTextColor
                    }
                    Text {
                        text: qmlBridge ? qmlBridge.getTotalSamplingCount().toString() : "0"
                        font.pixelSize: 18
                        font.bold: true
                        color: AppStyle.textColor
                    }
                }

                ColumnLayout {
                    spacing: 5
                    Text {
                        text: "总采样体积 (L)"
                        font.pixelSize: 12
                        color: AppStyle.secondaryTextColor
                    }
                    Text {
                        text: qmlBridge ? qmlBridge.getTotalSamplingVolume().toFixed(1) : "0.0"
                        font.pixelSize: 18
                        font.bold: true
                        color: AppStyle.textColor
                    }
                }

                ColumnLayout {
                    spacing: 5
                    Text {
                        text: "平均流量 (L/min)"
                        font.pixelSize: 12
                        color: AppStyle.secondaryTextColor
                    }
                    Text {
                        text: qmlBridge ? qmlBridge.getAverageFlowRate().toFixed(1) : "0.0"
                        font.pixelSize: 18
                        font.bold: true
                        color: AppStyle.textColor
                    }
                }

                ColumnLayout {
                    spacing: 5
                    Text {
                        text: "设备运行时间 (小时)"
                        font.pixelSize: 12
                        color: AppStyle.secondaryTextColor
                    }
                    Text {
                        text: qmlBridge ? qmlBridge.getDeviceRunningTime().toFixed(1) : "0.0"
                        font.pixelSize: 18
                        font.bold: true
                        color: AppStyle.textColor
                    }
                }

                Item {
                    Layout.fillWidth: true
                }
            }
        }
    }

    // 数据更新定时器
    Timer {
        id: dataUpdateTimer
        interval: 10000 // 10秒更新一次
        running: true
        repeat: true
        onTriggered: refreshCharts()
    }

    function refreshCharts() {
        if (!qmlBridge) return

        // 获取历史数据
        var historyData = qmlBridge.getHistoryData(dataVisualizationPage.selectedTimeRange)
        
        // 更新流量图表
        flowRateSeries.clear()
        if (historyData && historyData.flowRate) {
            for (var i = 0; i < historyData.flowRate.length; i++) {
                flowRateSeries.append(i, historyData.flowRate[i])
            }
        }
        
        // 更新温度图表
        temperatureSeries.clear()
        if (historyData && historyData.temperature) {
            for (var j = 0; j < historyData.temperature.length; j++) {
                temperatureSeries.append(j, historyData.temperature[j])
            }
        }
        
        // 更新压力图表
        pressureSeries.clear()
        if (historyData && historyData.pressure) {
            for (var k = 0; k < historyData.pressure.length; k++) {
                pressureSeries.append(k, historyData.pressure[k])
            }
        }
        
        console.log("图表数据已刷新")
    }

    Component.onCompleted: {
        refreshCharts()
    }
}